<template>
    <div class="home-container">
      <van-nav-bar  class="page-nav-bar" fixed>
        <van-button icon="search" slot="title" class="search-btn" round type="info" size="small"
        to="/search"
        >搜索</van-button>
      </van-nav-bar>

      <!--滑块-->
    <van-tabs class="channel-tabs" v-model="active" animated swipeable >
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
      <article-list :channel="item"></article-list>
      </van-tab>

      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="hamburger-btn" @click="show=true">
        <i  class="iconfont icon-gengduo" ></i>
      </div>

    </van-tabs>
    <!--弹出层-->
    <van-popup v-model="show"
    closeable
    close-icon-position="top-left"
    position="bottom"
    @close="check"
    :style="{ height: '100%' }"
    >
    <channel-edit :channels="channels" :activeIndex="active"
    @updateActive="updateActive"
    @colsePopup = "show = false"
    ref="channelEdit"
    ></channel-edit>
  </van-popup>

    </div>
  </template>

<script>
import { getUserChannels } from '@/api/user'
import articleList from './components/articleList.vue'
import ChannelEdit from './components/channel-edit'
import { mapState } from 'vuex'
import { getItem } from '@/utils/localStorage'
export default {
  name: 'HomePage',
  components: {
    articleList,
    ChannelEdit
  },
  props: {},
  data () {
    return {
      active: 0,
      channels: [],
      show: false

    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {
    this.loadChannels()
  },
  mounted () {},
  methods: {
    check () {
      // window.console.log('弹出层被关闭')
      this.$refs.channelEdit.check()
      window.console.log(this.$refs.channelEdit)
    },
    updateActive (ind) {
      this.active = ind
    },
    async loadChannels () {
      try {
        if (this.user) {
          const res = await getUserChannels()
          this.channels = res.data.data.channels
        } else {
          const local = getItem('channles')
          if (local) {
            this.channels = local
          } else {
            const { data } = await getUserChannels()
            this.channels = data.data.channels
          }
        }
      } catch (err) {
        window.console.log(err)
        this.$toast('数据获取失败')
      }
      //
    }
  }
}
</script>

<style lang="less" scoped>
 .home-container{
  padding-top: 178px;
  padding-bottom: 100px;
  .van-nav-bar__title {
    max-width: unset;
  }
  .search-btn{

    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }

  /deep/.channel-tabs{
      .van-tabs__wrap{
        height: 82px;
        position: fixed;
        top:92px;
        z-index: 1;
        left: 0;
        right: 0;
      }
    .van-tab{
      border-right: 1px solid #edeff3;
      min-width: 200px;
      font-size: 30px;
      color: #777777;
    }
    .van-tab--active{
      color: #333333;
    }
    .van-tabs__line{
      width: 38px !important;
      height: 5px;
      background-color: #3296fa;
      bottom: 38px;
    }

    .placeholder{
      width: 66px;
      height: 82px;
      flex-shrink: 0;
     //flex-basis: 22%;
    }
    .hamburger-btn{
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 66px;
      height: 82px;
      opacity: 0.9;
      background-color: #fff;
      .iconfont{
        font-size: 38px;
      }
      &:before{
        content: '';
        position: absolute;
        left: 0;
        width: 1px;
        height: 100%;
        background-image: url(~@/assets/gradient-gray-line.png);
        background-size: contain;
      }

    }

  }

 }

</style>
